<template>
    <top></top>
    <topBottom></topBottom>
    <div class="content">
    <div class="headerBread" style="height: 35px;">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/store' }">我的商城</el-breadcrumb-item>
        <el-breadcrumb-item>收货地址管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
<div class="contents">
<el-card>
  <div class="contentHeader">
       
       <span style="font-size: 24px;">收货地址管理</span>
     </div>
 
     
     <div class="contentMiddle">
         <el-card style="width: 100%; " shadow="always">
           <el-form :model="addressForm" :rules="rules" ref="formRef" label-width="auto" 
             style="display: flex; flex-direction: column; ">
                 <el-form-item label="收货人 : " style="width: 32% " class="m1" prop="linkUser">
                     <el-input maxlength="20" placeholder="请填写收货人" v-model="addressForm.linkUser" clearable></el-input>
                 </el-form-item>
 
                 <div style="display: flex;">
                 <el-form-item label="手机电话 : " style="width: 32%" class="m1" prop="linkPhone">
                     <el-input maxlength="14" v-model="addressForm.linkPhone"  clearable placeholder="请输入11位手机号码"></el-input>
                 </el-form-item>
                 </div>
 
                 <el-form-item label="收货地址 : " style="width: 90%" class="m1" prop="linkAddress" >
                 
                 <el-cascader style="width: 666px" v-model="addressForm.linkAddress" placeholder="请选择地区" :options="pcaTextArr" size="middle"></el-cascader>
                 </el-form-item>
 
                 <el-form-item label=" " prop="addressDetil">
                 <el-input 
                     v-model="addressForm.addressDetil"
                     style="width: 80%;
                     margin-top:10px;"
                     :autosize="{ minRows: 2, maxRows: 4 }"
                     type="textarea"
                     placeholder="请在此处填写区县以下详细地址"
                 />
                 </el-form-item>
                 <el-form-item>
                     <div style="height:40px; padding-top: 10px; padding-bottom: 10px; 
                     display: flex; flex-direction: row;justify-content: center;
                     width: 100%;">
                         <el-button type="primary" @click="handleSubmit" style="width: 130px; height: 40px;">
                          {{btnText.text}}
                         </el-button>
                         <el-button type="warning" @click="recall" style="width: 130px; height: 40px;">清空</el-button>
                     </div>
                 </el-form-item>
             </el-form>   
            </el-card>  
          </div>
    <div class="contentBottom">
      <div class="table-container">
        <div class="bottomTableTh" style="display: flex; justify-content: space-evenly;">
          <div class="bottomTableThs">收货人</div>
          <div class="bottomTableThs">收货地址</div>
          <div class="bottomTableThs">手机号</div>
          <div class="bottomTableThs" style="border:0">操作</div>
        </div>
        <div class="table-content">
          <div v-for="(data, index) in tableData" :key="index" class="table-row">
            <div class="table-cell" style="display: flex; flex: 1; justify-content: center;">{{ data.linkUser }}</div>
            <div class="table-cell" style="display: flex; flex: 1; justify-content: center;">{{ data.linkAddress }}</div>
            <div class="table-cell" style="display: flex; flex: 1; justify-content: center;">{{ data.linkPhone }}</div>
            <div class="table-cell actions" >
              <el-button @click="editAddress(data.id)" type="primary">编辑</el-button>
              <el-button @click="deleteAddress(data.id)" type="danger">删除</el-button>
              <el-button @click="setDefault(data.id)" :disabled="data.isDefault === '1'" >
                <span v-if="data.isDefault == 1" style="color:red">默认地址</span>
                <span v-else-if="data.isDefault == 0" >设为默认</span>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</div>


</div>
<div>
  <footer0></footer0>
</div>

</template>

<script setup>
import top from '@/views/top-zjm/top.vue'
import topBottom from '@/views/second-lzm/index.vue'
import footer0 from '@/views/simpleFooter-lzm/index.vue'
import {reactive, ref } from 'vue'
import { pcaTextArr } from "element-china-area-data";
import { get,post } from "@/plugins/axios"  
import { ArrowRight } from '@element-plus/icons-vue'
import { Path } from '@/constant';
let btnText = reactive({text: '添加新地址'}) 
const addressForm = ref({
  id:'',
  linkUser:'',
  linkAddress: '',
  linkPhone:'',
  addressDetil:''
})
const formRef = ref(null);
const tableData = ref([]);    
getTableDate()
function getTableDate(){
  get(Path.addressList,{
  }, content => {
    tableData.value = content
  })
}
// 拼接地址的函数
function getAddress(){
  let address = '';
  addressForm.value.linkAddress.forEach( item => {
      address += item
  })
  address += addressForm.value.addressDetil
  return address
}
    

const rules = {
  linkUser: [
    { required: true, message: '请填写收货人', trigger: 'blur' }
  ],
  linkPhone: [
    { 
      required: true, 
      message: '请输入手机号码', 
      trigger: 'blur' 
    },
    { 
      pattern: /^[0-9]{11}$/, 
      message: '手机号码只能是11位数字', 
      trigger: 'blur' 
    }
  ],
  linkAddress: [
    { required: true, message: '请选择收货地址', trigger: 'change' }
  ],
  addressDetil: [
    { required: true, message: '请填写具体收货地址', trigger: 'change' }
  ],
};
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      post( btnText.text === '添加新地址' ? Path.addressAdd : Path.addressUpdate,{
        id: addressForm.value.id,
        name: addressForm.value.linkUser,
        address: getAddress(),
        phone: addressForm.value.linkPhone,
      },content => {
        if( btnText.text === '保存修改'){
          btnText.text = '添加新地址'
        }
        getTableDate()
      })
    } else {
      return false;
    }
  });
};  // 重置表单函数    
function recall (){
    addressForm.value.id = '',
    addressForm.value.addressDetil = '',
    addressForm.value.linkAddress = '',
    addressForm.value.linkPhone = '',
    addressForm.value.linkUser = ''
}
    

function editAddress(id) {
  btnText.text = '保存修改'
  tableData.value.forEach( item => {
    if(item.id === id){
      addressForm.value.id = id;
      addressForm.value.linkPhone = item.linkPhone;
      addressForm.value.linkUser = item.linkUser;
      return 
    }
  })
}

function deleteAddress(id) {
  post(Path.addressDelete,{
    id: id
  },content => {
    if(content)
    getTableDate()
  })
}

function setDefault(id) {
  post(Path.addressSetDefault,{
    id: id
  },content => {
    if(content)
    getTableDate()
  })
}


</script>

<style scoped lang="scss">
    .highlight-row {
  color: red;
}

*{
  border: 0;
  padding:0;
  box-sizing: border-box;
  
}

.required {
  color: red;
  margin-right: 5px;
}

.content{
    width:80%;
    height:auto;
    margin:1px 10% 0px 10%;
    
    .headerBread{
        height:36px;
    }
    .contents{
        width:100%;
        height:996.33px;
        display: flex;
        flex-direction:column;
       
        .contentHeader{
            height: 50px;
            /* border: 0.667px black solid; */
            padding:10px 10% 0% 10%;
            text-align: center; /* 水平居中 */
            
        }
        .contentMiddle{
            height:462px;
            position: relative;
            margin:20px 0 30px 0px;
            /* border: 0.667px black solid; */
            padding:10px 10% 0% 10%;
            text-align: center; /* 水平居中 */
            .m1{
                height: 41px;
                padding-top:10px;
                
            }
        }
        .contentBottom{
            width: 100%;
            overflow-x: hidden;
            height:auto;
            position: relative;
            /* border: 0.667px black solid; */
            padding:0px 10% 0% 10%;
            text-align: center; /* 水平居中 */
            /* 表格头部样式 */
            .bottomTableTh{
              padding:0 2.5% 0 2.5%;
              .bottomTableThs{
                 border-right:0.667px black solid;
                flex: 1; /* Allow cells to grow and shrink */
                  display: flex; /* Enable flex layout in each cell */
                  align-items: center; /* Center items vertically */
                  justify-content: center; /* Center items horizontally */
                  
                  font-size:14px;
                
              
              }
            }
            .table-container {
                max-width: 100%;
                overflow-x: auto;
              }

              .bottomTableTh, .table-row {
                display: flex;
                flex-wrap: wrap;
                border-bottom: 1px solid #ddd;
              }

              .bottomTableTh {
                background-color: #e0e0e0;
                font-weight: bold;
                padding: 10px;
                align-items: center; /* Ensure vertical alignment in header */
              }

              .bottomTableThs, .table-cell {
                flex: 1;
                min-width: 100px;
                padding: 10px;
                box-sizing: border-box;
                display: flex;
                align-items: center; /* Center content vertically */
                word-wrap: break-word; /* Wrap text within the cell */
                word-break: break-all;
                font-size: 12px;
              }

              .table-row {
                align-items: stretch; /* Make rows stretch to match height */
              }

              .actions {
                display: flex;
                gap: 10px;
              }

              button {
                padding: 5px 10px;
                border: 1px solid #ccc;
                border-radius: 4px;
                cursor: pointer;
              }
          }
        }
    }

</style>